<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<!-- 导入公共代码 -->

	<!-- 引入vue的脚本 -->
	<script src="js/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	<!-- 引入elementui的样式和脚本 -->
	<link rel="stylesheet" href="js/element-plus-index.css" />
	<script src="js/element-plus-index.js"></script>
	<script src="js/element-icon.js"></script>
	<!-- 引入axios的脚本 -->
	<script src="js/axios-min.js"></script>
	<!-- 封装的请求 -->
	<script src="js/request.js"></script>
	<script src="js/api.js"></script>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.el-col {
			border-radius: 4px;

		}

		.grid-content {
			border-radius: 4px;
			min-height: 36px;
		}

		#app {
			background-color: #e60012;
		}

		.slogen {
			line-height: 40px;
			color: yellow;
			font-weight: 600;
			padding-left: 30px;
			padding-top: 20px;
		}

		#shopName {
			font-weight: 900;
			font-size: 16px;
		}

		.top {
			padding: 10px;
			border-radius: 20px 20px 0px 0px;
			background-color: #F1F3F7;
			border-bottom: 1px solid #e2e2e2;
		}

		.tit p {
			margin-top: 5px;
			color: #666;
			font-size: 12px;
		}

		.deskName {
			margin-top: 10px;
			text-align: center;
		}

		.middle {
			background-color: #FFF;
			padding-top: 10px;
			padding-bottom: 100px;
		}

		.middle .types {
			background-color: #f5f5f5;
			border-radius: 10px;
		}

		.middle ul li {
			text-align: center;
			font-weight: 500;
			list-style: none;
		}

		.middle ul li a {
			color: #333;
			text-decoration: none;
			cursor: pointer;
			display: block;
			line-height: 40px;
		}

		.bottom {
			background-color: #ececec;
			text-align: center;
			height: 40px;
			line-height: 40px;
			position: fixed;
			bottom: 0px;
			width: 100%;
			cursor: pointer;
		}

		.pros img {
			width: 100%;
		}

		.pros {
			padding-left: 10px;
			position: relative;
		}

		.priceRed {
			color: red;
		}

		.price {
			font-size: 18px;
		}

		.oldPrice {
			text-decoration: line-through;
			color: #666;
			padding-left: 5px;
		}

		.jiahao {
			position: absolute;
			right: 30px;
			color: yellow;
			font-family: "黑体";
			font-weight: 900;
			font-size: 20px;
			background: red;
			border-radius: 20px;
			display: inline-block;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			cursor: pointer;
		}

		.taste {
			font-size: 12px;
			color: #999;
			padding-top: 2px;
			margin-bottom: 10px;
		}

		.pros {}

		.proItem {
			margin-bottom: 10px;
		}

		.cart {
			height: 40px;
			background: #544747;
			width: 90%;
			position: fixed;
			bottom: 40px;
			border-radius: 20px;
			opacity: 0.95;
			color: white;
			line-height: 40px;
			margin: 0px 20px;
			text-align: center;
			cursor: pointer;
		}

		.cart button {
			position: absolute;
			right: 0px;
			height: 40px;
		}



		.cart img {
			width: 100%;
		}

		#oldTotalPrice {
			text-decoration: line-through;
		}

		#totalNum {
			position: relative;
			top: -15px;
			left: -5px;
			border-radius: 10px;
			display: inline-block;
			padding: 0 6px;
			font-size: 12px;
			text-align: center;
			background-color: #ff5722;
			color: #fff;
			height: 18px;
			line-height: 18px;
		}

		#totalPrice {
			font-size: 20px;
		}

		.toOrder {
			background: #e60012;
			display: inline-block;
			width: 100px;
			border-radius: 20px;
			float: right;
			color: yellow;
			font-weight: 600;
		}

		#app {
			overflow: hidden;
		}

		.jian {
			position: absolute;
			right: 100px;
			color: #999;
			font-family: "黑体";
			font-weight: 900;
			font-size: 20px;
			background: #F1F3F7;
			border-radius: 20px;
			display: inline-block;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			cursor: pointer;
		}

		.proNum {
			position: absolute;
			right: 70px;
		}
	</style>
</head>
<body>
<div id="app">
	<!-- 口号 -->
	<el-row :gutter="0">
		<el-col :xs="24" :sm="24" :md="24">
			<p class="slogen">就爱这 3奶茶店3</p>
		</el-col>
	</el-row>

	<!-- 头部 -->
	<el-row :gutter="0" class="top">
		<el-col :xs="14" :sm="14" :md="14" class="tit">
			<p id="shopName"> 3奶茶店3（郑州农大）</p>
			<p><el-icon>
				<Location />
			</el-icon>距离0.1km | 河南省郑州市河南农业大学</p>
		</el-col>
		<el-col :xs="10" :sm="10" :md="10">
			<div class="deskName">
				<!-- 双人1号桌 -->
				<el-select v-model="deskId" placeholder="Select" style="width: 140px" @change="getCartList()">
					<el-option v-for="item in deskList" :key="item.id" :label="item.dname" :value="item.id" />
				</el-select>
			</div>
		</el-col>
	</el-row>


	<!-- 中间 -->
	<el-row :gutter="0" class="middle">
		<!-- 左侧：分类列表 -->
		<el-col :xs="6" :sm="6" :md="6" class="types">
			<ul class="type">
				<li v-for="(item ,index) in typeList"><a href="#">{{item.tname}}</a></li>
			</ul>
		</el-col>
		<!-- 右侧：菜品列表 -->
		<el-col :xs="18" :sm="18" :md="18">
			<div class="pros">
				<!-- 单个菜品 -->
				<el-row :gutter="10" class="proItem" v-for="(item,index) in proList" >
					<el-col :xs="8" :sm="8" :md="8">
						<img :src="serverBaseURL+'/showPic/'+item.img" alt="">
					</el-col>
					<el-col :xs="16" :sm="16" :md="16">
						<h4> {{item.pname}}</h4>
						<p class="taste">{{item.taste}} </p>
						<p class="proBottom">
							<span class="priceRed">￥<span class="price">{{item.price}}</span></span>
							<span class="oldPrice">{{item.oldPrice}}</span>
							<span class="jiahao" @click="addCart(item.id,+1)">+</span>
						</p>
					</el-col>
				</el-row>

				<!-- 菜品结束 -->
			</div>
		</el-col>
	</el-row>
	<!-- 中间结束 -->

	<!-- 弹窗 -->
	<el-dialog v-model="dialogVisible" title="购物清单" width="90%" :before-close="handleClose">
		<!-- 弹窗 单个菜品 -->
		<el-row :gutter="10" class="proItem" v-for="(item,index) in cartList">
			<el-col :xs="6" :sm="6" :md="6">
				<img :src="serverBaseURL+'/showPic/'+item.img" alt="" style="width: 100%;">
			</el-col>
			<el-col :xs="18" :sm="18" :md="18">
				<h4> {{item.pname}}</h4>
				<p class="taste">{{item.taste}} </p>
				<p class="proBottom">
					<span class="priceRed">￥<span class="price">{{item.price}}</span></span>
					<span class="oldPrice">{{item.oldPrice}}</span>
					<span class="jian" @click="addCart(item.productId,-1)">-</span>
					<span class="proNum"> {{item.num}} </span>
					<span class="jiahao" @click="addCart(item.productId,+1)">+</span>
				</p>
			</el-col>
		</el-row>
		<!-- 人数和备注 -->
		<el-row>
			<el-col :xs="10" :sm="10" :md="10">
				<el-input-number v-model="propleCount" :min="1" :max="10" style="width: 100px;" />
			</el-col>
			<el-col :xs="6" :sm="6" :md="6">
				<el-input v-model="descr" style="width: 150px" placeholder="备注" clearable />
			</el-col>
		</el-row>

		<!-- 弹窗 按钮区 -->
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="clearCart">清空购物车</el-button>
				<el-button type="primary" @click="toAddOrder()">
					去下单
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 弹窗结束 -->


	<!-- 购物车 -->
	<el-row :gutter="0" class="cart" @click="openCartList">
		<el-col :xs="24" :sm="24" :md="24">
			<el-icon>
				<Memo />
			</el-icon>
			<span id="totalNum">{{totalNum}}</span>
			￥<span id="totalPrice">{{totalPrice}}</span>
			<span id="oldTotalPrice">￥{{oldTotalPrice}}</span>
			<span class="toOrder">去买单</span>
		</el-col>
	</el-row>


	<!-- 底部菜单-->
	<el-row :gutter="0" class="bottom">
		<el-col :xs="12" :sm="12" :md="12" style="background: #CCC;">
			<div class="grid-content">
				<el-icon>
					<Fries />
				</el-icon>点餐
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :md="12" @click="toOrderPage()">
			<div class="grid-content">
				<el-icon>
					<List />
				</el-icon>
				订单
			</div>
		</el-col>
	</el-row>

</div>
<script>
	const App = {
		data() {
			return {
				typeList: [], //声明数组，用来临时储存数据
				proList: [],
				serverBaseURL: 'http://localhost:8080',
				deskList: [], //餐桌列表的数组
				deskId: "请选择", //选中的餐桌id
				totalNum: 0,
				totalPrice: 0,
				oldTotalPrice: 0,
				dialogVisible: false,
				cartList: [], //声明一个数组，用来存储购物车清单
				propleCount: 1,
				descr: ''
			}
		},
		created() { //当vue对象创建之后就会执行的函数：
			this.getAllTypeList(); //调用函数
			this.getAllProList(); //调用函数
			this.getAllDeskList(); //调用函数
			if(globalData.getDeskId()){
				this.deskId = globalData.getDeskId();
				this.getCartList();
			}else{
				ElementPlus.ElMessage({
					message: '请先选桌号',
					type: 'warning'
				})
			}

		},
		methods: { //自定义函数
			async getAllTypeList() { //自定义函数：获取分类列表
				const res = await getAllTypeApi()
				this.typeList.push(...res.data)
			},
			async getAllProList() { //自定义函数：获取菜品列表
				const res = await getAllProductApi()
				this.proList.push(...res.data)
			},
			async getAllDeskList() { //自定义函数：获取餐桌列表
				const res = await getAllDeskApi()
				this.deskList.push(...res.data)
			},
			async toAddOrder() { //自定义函数：下单
				let param = {
					"descr": this.descr,
					"deskId": this.deskId,
					"propleCount": this.propleCount
				}
				const res = await postAddOrderApi(param);
				if(res.code==200){
					//调用方法：查询当前购物车的最新信息
					this.getCartList();
					//关闭弹窗
					this.dialogVisible = false;
					//提示
					ElementPlus.ElMessage({
						message: '成功',
						type: 'success',
						offset: 100
					})
				}
			},
			async clearCart() { //自定义函数：清空购物车
				let param = {
					'deskId': this.deskId
				}
				const res = await delCartApi(param);
				if (res.code == 200) {
					//若执行成功，则更新购物车清单
					this.getCartList();
				}
			},
			openCartList() {
				//0.购物车为空的时候，友好提示
				if (this.cartList.length == 0) {
					ElementPlus.ElMessage({
						message: '购物车里空空如也',
						type: 'warning'
					})
					return;
				}
				//1.打开弹窗
				this.dialogVisible = true;
				//2.展示购物车清单
			},
			async getCartList() { //自定义函数：获取购物车清单
				globalData.setDeskId(this.deskId);
				let param = {
					'deskId': this.deskId
				}
				const res = await getCartApi(param)
				//将购物车清单数组赋值
				this.cartList = res.data;
				// console.log(res);
				this.totalNum = 0;
				this.totalPrice = 0;
				this.oldTotalPrice = 0;
				for (let item of res.data) {
					this.totalNum += item.num;
					this.totalPrice += item.num * item.price;
					this.oldTotalPrice += item.num * item.oldPrice;
				}
			},
			async addCart(productId, num) {
				//先判断是否选择了桌号，提示
				if (isNaN(this.deskId)) {
					ElementPlus.ElMessage({
						message: '请先选桌号',
						type: 'warning'
					})
					return;
				}
				//加购物车
				var param = {
					'productId': productId,
					'deskId': this.deskId,
					'num': num
				};
				var res = await postAddCart(param);
				if (res.code == 200) {
					//调用方法：查询当前购物车的最新信息
					this.getCartList();
					//提示消息
					ElementPlus.ElMessage({
						message: '成功',
						type: 'success',
						offset: 100
					})
				}
			},
			toOrderPage() {
				window.location.href = "orders.html"
			}
		}

	};



	const app = Vue.createApp(App);
	app.use(ElementPlus);
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		app.component(key, component)
	}
	app.mount("#app");
</script>
</body>
</html>